<template>
  <Portlet title="承运商">
    <table class="order-table">
      <tr>
        <td align="center" style="padding-left: 5px; width: 180px;">
          <img :src="'/api/ms-mongodb/file/download?fileId=' + trunkMerchantDetails.logo" style="width: 150px; height: 150px; border-radius: 50%;"/>
        </td>
        <td style="min-width: 460px">
          <div class="marginBottom8">
            {{trunkMerchantDetails.name}}
            <el-tooltip v-if="trunkMerchantDetails.attestation == 1" class="item" effect="dark" content="已通过资质认证" placement="top-start">
              <img style="no-repeat: center; height: 16px; width: 20px" src="/static/images/faHuoBao/certification.png" alt="资质认证" title="已通过资质认证" />
            </el-tooltip>
            <el-tooltip v-if="trunkMerchantDetails.attestation !== 1" class="item" effect="dark" content="未资质认证" placement="top-start">
              <img style="no-repeat: center; height: 16px; width: 20px" src="/static/images/faHuoBao/Unproven.png" alt="未资质认证" title="未资质认证"/>
            </el-tooltip>
          </div>
          <div class="marginBottom8">
            <span class="shiFuAddress">{{trunkMerchantDetails.compayType}}</span><span v-if="trunkMerchantDetails.province"> | {{trunkMerchantDetails.province}} {{trunkMerchantDetails.city}} {{trunkMerchantDetails.district}}</span>
          </div>
          <div class="marginBottom8">
            <img style="no-repeat: center; height: 22px; width: 61px" src="/static/images/faHuoBao/compensate.png" alt="赔付承诺" title="赔付承诺"  @click="pledge($event, trunkMerchantDetails)" />
          </div>
        </td>
        <td align="center">
          <div class="cell-center">
            <span style="font-size: 36px;" class="font-red">￥{{trunkMerchantDetails.trunkMoney}}</span><br>
          </div>
        </td>
        <td align="center" style="min-width: 240px;">
          <div class="cell-center">
          </div>
        </td>
      </tr>
    </table>
    <modal-fees-detail ref="modalFeesDetail" :orderId="orderId"></modal-fees-detail>
  </Portlet>
</template>

<script>
import {dotData} from '@/utils'
import modalFeesDetail from '@/views/fhb/myOrders/components/modal/modalFeesDetail'
export default {
  name: 'service-carrier',
  props: {
    orderDetail: {
      type: Object,
      required: true
    }
  },
  components: {
    modalFeesDetail
  },
  data() {
    return {
      isFhbAdminPath: -1
    }
  },
  computed: {
    trunkMerchantDetails() {
      return dotData(this.orderDetail, 'trunkMerchantDetails') || {}
    },
    orderId() {
      return dotData(this.orderDetail, 'fhbOrder.id') || ''
    }
  },
  methods: {
    // 赔付承诺
    pledge() {
      let pledgeStr = dotData(this.orderDetail, 'trunkMerchantDetails.compensate')
      this.$alert(pledgeStr, '赔付承诺', {
        showConfirmButton: '关闭',
        dangerouslyUseHTMLString: true
      })
    },
    // 费用详情
    feesDetail() {
      this.$refs.modalFeesDetail.show()
    }
  }
}
</script>

<style scoped>

</style>
